// 引入api模块
import axios from "../api/index.js";
import usersView from "@/users.ejs";
// ???为什么要获取baseURL
let baseURL = axios.defaults.baseURL;
console.log(baseURL);

// getdata函数
async function getdata(res, p) {
  let { data } = await axios.get("/user/getdata", {
    params: {
      p,
    },
  });
  console.log(data);
  res.render(
    usersView({ users: data.users, baseURL, pageCount: data.pageCount })
  );
}

async function addEvent(res, router) {
  // 点击添加用户
  // 一、点击按钮的时候 显示添加用户的对话框
  let addUserBtn = document.querySelector(".adduer");

  // 获取添加的对话框
  let adduermodelEle = document.querySelector(".adduermodel");
  // 遮罩层元素
  let maskEle = document.querySelector(".mask");

  addUserBtn.onclick = function () {
    console.log("点击了");
    // 点击添加按钮的时候  让对话框和 遮罩层显示出来
    adduermodelEle.style.display = "block";
    maskEle.style.display = "block";
  };

  // 二 点击 关闭的时候 关闭 对话框
  let closebtnEle = document.querySelector(".closebtn");

  closebtnEle.onclick = function () {
    adduermodelEle.style.display = "none";
    maskEle.style.display = "none";
  };

  // 三 点击 提交按钮的时候  提交用户的信息 到后端。
  let imgFileEle = document.querySelector(".imgFile");
  let imgshowEle = document.querySelector(".imgshow");

  imgFileEle.onchange = function () {
    // input 发生改变的时候触发函数；
    console.log("发生改变了!!");
    // 获取上传的图片对象
    // 通过 input.files
    // console.log(this.files[0])
    let imgObj = this.files[0];
    let filerader = new FileReader();
    filerader.readAsDataURL(imgObj); // 把图片对象转成url形式的数据，base64格式
    // 需要在filerader读完数据之后 获取base64
    filerader.onload = function () {
      // 读取完毕了，获取base64字符串
      console.log(filerader.result);
      let myimg = new Image(); // 创建一个img 标签
      myimg.src = filerader.result; // 设置图片的路径地址是获取到的base64的路径
      myimg.style.width = "100px";
      myimg.style.height = "100px";
      // 把图片的对象添加到html里
      imgshowEle.innerHTML = ""; // 请求显示的div里的内容
      imgshowEle.appendChild(myimg);
    };
  };

  // 点击提交按钮的时候 发送ajax
  let submitBtn = document.querySelector(".btn");
  let usernameEle = document.querySelector(".username");
  let pwdEle = document.querySelector(".pwd");
  let repeatpwdEle = document.querySelector(".repeatpwd");
  submitBtn.onclick = async function () {
    // 发送ajax 测试
    // 获取用户名和密码
    let username = usernameEle.value;
    let pwd = pwdEle.value;
    let repeatpwd = repeatpwdEle.value;
    // 获取文件对象
    let imgfile = imgFileEle.files[0]; // 文件对象

    // 表单的校验
    if (username == "") {
      return alert("用户名不能为空");
    }

    if (pwd == "") {
      return alert("密码不能为空");
    }

    // 两次输入的密码要一致
    if (pwd !== repeatpwd) {
      return alert("两次输入的密码不同");
    }

    // 文件不能是undefined
    if (typeof imgfile == "undefined") {
      return alert("图像不能为空");
    }

    console.log(username, pwd, imgfile);

    // 借助 FormData 预定义类
    let form = new FormData(); // 模拟一个空的form表单
    form.append("username", username);
    form.append("pwd", pwd);
    form.append("myimg", imgfile);
    // console.log(form);
    // 把form当成数据直接提交给后端 ，自动设置请求头部信息
    let { data } = await axios.post("/user/adduser", form);
    if (data.status == 1) {
      // 需要把对话框隐藏起来
      alert("添加成功");
      adduermodelEle.style.display = "none";
      maskEle.style.display = "none";
      // 添加成功之后 要获取最新数据 在调用render方法渲染到页面上
      await getdata(res); // 调用ajax 获取最新的数据，然后再渲染到页面上
      await addEvent(res); // 绑定事件
    }

    //     console.log("点击了提交按钮");
    //   let res = await axios.get("/user/getdata");
    //   console.log(res);
  };

  let delBtns = document.querySelectorAll(".delBtn");
  delBtns.forEach((btn) => {
    btn.onclick = async function () {
      let _id = this.getAttribute("myid");
      console.log(_id);
      let reslut = confirm("你确定要删除吗?");
      if (reslut) {
        let { data } = await axios.delete("/user/deluser", {
          params: {
            _id,
          },
        });

        console.log(data); // 后端返还的结果值。
        if (data.status == 1) {
          await getdata(res); // 渲染视图
          await addEvent(res); // 绑定事件
        } else {
          console.log(data);
        }
      }
    };
  });

  // 分页逻辑
  let pageEles = document.querySelectorAll(".pageContainer a");
  pageEles.forEach((pageEle) => {
    pageEle.onclick = async function (e) {
      console.log("点击了页码");
      e.preventDefault();

      // 阻止 a的默认跳转行为

      // 获取当前点击的页码 ；
      let p = this.innerHTML;
      p = p.trim();
      console.log("(" + p.trim() + ")");
      await getdata(res, p);
      await addEvent(res);
    };
  });
}

export default function (router) {
  router.route("/admin/users", async (req, res) => {
    await getdata(res); // 渲染视图
    await addEvent(res); // 绑定事件
    // res.render(usersView());
  });
}
